<template>
  <div class="status">
    <!-- 搜索框 -->
    <div class="search">
      <el-input class="elinput" placeholder="请输入表号" clearable prefix-icon="el-icon-search" v-model="meterNumber">
      </el-input>
      <el-select @change="search" clearable v-model="online" placeholder="请选择状态">
        <el-option v-for="item in onLineSelect" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker @change="change" :clearable="false" v-model="time" type="daterange" align="center"
        range-separator="-" :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索 / 刷新</el-button>
      <el-button type="danger" icon="el-icon-s-data" @click="openRank">掉线排名</el-button>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table :data="tableData" ref="isExpand" v-loading="loading" border height="calc(100%-10rem)"
        highlight-current-row stripe style="width: 100%">
        >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="meterNumber" label="设备表号">
        </el-table-column>
        <el-table-column align="center" prop="meterType" label="设备类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.meterType == 1">电表</el-tag>
            <el-tag type="info" v-else-if="scope.row.meterType == 2">水表</el-tag>
            <el-tag type="warning" v-else>暂无</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="meterStatus" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" effect="dark" v-if="scope.row.meterStatus">在线</el-tag>
            <el-tag v-else effect="dark" type="danger">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="记录时间">
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="more(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination v-show="tableData.length !== 0" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 30, 50, 100, 150, 200]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 详情 -->
    <div class="more">
      <el-dialog :title="moreData.meterName" :visible.sync="moreDetail" width="800px">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="是否在线">
            <el-tag effect="dark" type="success" v-if="moreData.isOnline == true &&
              (moreData.meterModelId == 1 ||
                moreData.meterModelId == 3 ||
                moreData.meterModelId == 5 || moreData.meterModelId == 7 || moreData.meterModelId == 8)
              ">在线</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.isOnline == false &&
              (moreData.meterModelId == 1 ||
                moreData.meterModelId == 3 ||
                moreData.meterModelId == 5 || moreData.meterModelId == 7 || moreData.meterModelId == 8)
              ">离线</el-tag>
            <el-tag effect="dark" v-if="moreData.meterModelId == 2 ||
              moreData.meterModelId == 4 ||
              moreData.meterModelId == 6
              ">暂无</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="状态">
            <el-tag effect="dark" type="success"
              v-if="moreData.status == 1 && (moreData.meterModelId != 5 &&moreData.meterModelId != 6)">合闸</el-tag>
            <el-tag effect="dark" type="danger"
              v-if="moreData.status == 0 &&(moreData.meterModelId != 5 &&moreData.meterModelId != 6)">拉闸</el-tag>
            <el-tag effect="dark" type="success"
              v-if="moreData.status == 1 && (moreData.meterModelId == 5 || moreData.meterModelId == 6)">开阀</el-tag>
            <el-tag effect="dark" type="danger"
              v-if="moreData.status == 0 && (moreData.meterModelId == 5 || moreData.meterModelId == 6)">关阀</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="信号">
            <el-tag effect="dark" type="success" v-if="moreData.csq >= 16 && moreData.csq">{{ moreData.csq }}</el-tag>
            <el-tag effect="dark" type="warning" v-if="moreData.csq < 16 && moreData.csq && moreData.csq >= 8">{{
              moreData.csq }}</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.csq < 8 && moreData.csq && moreData.csq > 0">{{
              moreData.csq }}</el-tag>
            <el-tag effect="dark" type="danger" v-if="moreData.csq == null || moreData.csq == 0">暂无信号</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="IMEI">{{
            moreData.imei ? moreData.imei : "暂无"
          }}</el-descriptions-item>
          <el-descriptions-item label="ICCID">{{
            moreData.iccid ? moreData.iccid : "暂无"
          }}</el-descriptions-item>
          <el-descriptions-item label="表号">{{
            moreData.meterNumber
          }}</el-descriptions-item>
          <el-descriptions-item
            :label="(moreData.meterModelId != 5 &&moreData.meterModelId != 6) ? '剩余电量(度)' : '剩余水量(m³)'">{{
              moreData.elecSurplusCount
            }}</el-descriptions-item>

          <el-descriptions-item
            :label="(moreData.meterModelId != 5 &&moreData.meterModelId != 6) ? '使用电量(度)' : '使用水量(m³)'">
            {{ moreData.elecUseCount }}
          </el-descriptions-item>
          <el-descriptions-item label="单价(元)">{{
            moreData.meterSinglePrice
          }}</el-descriptions-item>

          <el-descriptions-item
            v-if="(moreData.meterModelId != 5 &&moreData.meterModelId != 6)"
            label="电流(A)">{{
              moreData.ampere
            }}</el-descriptions-item>
          <el-descriptions-item
            v-if="(moreData.meterModelId != 5 &&moreData.meterModelId != 6)"
            label="电压(V)">{{
              moreData.voltage
            }}</el-descriptions-item>

          <el-descriptions-item label="版本号">
            <span v-if="!moreData.ver">暂无</span>
            <span v-else>{{ moreData.ver }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <div style="
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            align-items: center;
          ">
          <div class="qrcode" ref="qrCodeUrl"></div>
          <div style="font-weight: bold; color: #000">
            {{ moreData.meterNumber }}
          </div>
        </div>
      </el-dialog>
    </div>

    <div class="out">
      <el-dialog title="掉线排名" :visible.sync="rankDialog" width="60%">
        <div class="search">
          <el-input class="elinput" placeholder="请输入表号" clearable prefix-icon="el-icon-search" v-model="meterNumber1">
          </el-input>
          <el-date-picker @change="change1" :clearable="false" v-model="time1" type="daterange" align="center"
            range-separator="-" :picker-options="pickerOptions1" start-placeholder="开始日期" end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search" @click="search1">搜索 / 刷新</el-button>
          <el-button type="success" icon="el-icon-download" @click="out"
            :disabled="tableData1.length == 0 ? true : false">导出</el-button>
        </div>
        <!-- 表格数据 -->
        <div class="table">
          <el-table :data="tableData1" ref="isExpand1" v-loading="loading1" border height="400" highlight-current-row
            stripe style="width: 100%">
            >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column align="center" prop="meterId" label="设备id">
            </el-table-column>
            <el-table-column align="center" prop="meterNumber" label="设备表号">
            </el-table-column>
            <el-table-column align="center" prop="count" label="掉线次数">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="操作">
              <template slot-scope="scope">
                <el-button type="success" size="mini" @click="more(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination v-show="tableData1.length !== 0" background @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1" :current-page="pageNum1" :page-sizes="[10, 30, 50, 100, 150, 200]"
            :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="total1">
          </el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getStatusApi,
  getStatusRankApi,
  outRankApi,
  getOneMeterApi,
} from "../../../../api/system/meter";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      moreData: {},
      meterNumber: "",
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      loading: false,
      time: [],
      time1: [],
      startDate: "",
      startDate1: "",
      endDate: "",
      endDate1: "",
      online: "",
      onLineSelect: [
        {
          label: "在线",
          value: 1,
        },
        {
          label: "离线",
          value: 0,
        },
      ],
      onLineSelect1: [
        {
          label: "在线",
          value: 1,
        },
        {
          label: "离线",
          value: 0,
        },
      ],
      loading1: false,
      tableData1: [],
      pageNum1: 1,
      pageSize1: 10,
      total1: null,
      rankDialog: false,
      meterNumber1: "",
      online1: "",
      moreDetail: false,
      qrcode: "",
      meterType: 1,
    };
  },
  created() {
    this.getTime();
    this.pageSize = Number(sessionStorage.getItem("pageSize")) || 10;
    this.pageNum = Number(sessionStorage.getItem("pageNum")) || 1;
    this.getStatus(
      this.pageNum,
      this.pageSize,
      this.meterNumber,
      this.startDate,
      this.endDate,
      this.online
    );
  },
  destroyed() {
    sessionStorage.removeItem("pageNum");
    sessionStorage.removeItem("pageSize");
  },
  methods: {
    // 详情
    more(e) {
      this.meterType = e.meterType;
      getOneMeterApi(e.meterId).then((res) => {
        if (res.code == 200) {
          this.moreDetail = true;
          this.moreData = res.data;
          let company =
            e.tenantName == "京凡智能"
              ? "https://www.jdzndl.com?"
              : e.tenantName == "程思物联"
                ? "https://system.ori-iot.com?"
                : e.tenantName == "浙江弘倡新能源科技"
                  ? "http://hc.ori-iot.com?"
                  : e.tenantName == "美家智控"
                    ? "http://mjzk.ori-iot.com?"
                    : e.tenantName == "玛尚物联"
                      ? "http://mswl.ori-iot.com?"
                      : e.tenantName == "八戒水电"
                        ? "http://bajie.ori-iot.com?"
                        : ''
          console.log(company);
          this.$nextTick(() => {
            if (this.qrcode) {
              this.$refs.qrCodeUrl.innerHTML = "";
            }
            this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: `${company}meterNumber=${this.moreData.meterNumber}`, // 需要转换为二维码的内容
              width: 100,
              height: 100,
              colorDark: "#000000",
              colorLight: "#ffffff",
            });
          });
        }
      });
    },
    // 导出
    out() {
      let loading = this.$loading({
        target: document.querySelector(".out .el-dialog"),
        lock: true,
        text: "导出中...",
      });
      outRankApi(
        this.pageNum1,
        this.pageSize1,
        this.meterNumber1,
        this.startDate1,
        this.endDate1,
        this.online1
      )
        .then((res) => {
          if (
            res.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          ) {
            loading.close();
            let blob = new Blob([res], { type: "application/octet-stream" });
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", "掉线排名.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },
    openRank() {
      this.rankDialog = true;
      this.search1();
    },
    getTime() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let date = `${year}-${month}-${day}`;
      this.time = [date, date];
      this.time1 = [date, date];
      this.startDate1 = date;
      this.startDate = date;
      this.endDate1 = date;
      this.endDate = date;
    },
    change() {
      if (this.time !== null) {
        this.startDate = this.time[0];
        this.endDate = this.time[1];
      } else {
        this.startDate = "";
        this.endDate = "";
      }
      this.search();
    },
    change1() {
      if (this.time1 !== null) {
        this.startDate1 = this.time1[0];
        this.endDate1 = this.time1[1];
      } else {
        this.startDate1 = "";
        this.endDate1 = "";
      }
      this.pageNum1 = 1;
      this.search1();
    },
    // 获取列表
    getStatus(pageNum, pageSize, meterNumber, startDate, endDate, online) {
      this.loading = true;
      getStatusApi(
        pageNum,
        pageSize,
        meterNumber,
        startDate,
        endDate,
        online
      ).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.loading = false;
          this.tableData = res.data.rows;
        } else {
          this.loading = false;
        }
      });
    },
    //获取排名
    getStatusRank(pageNum, pageSize, meterNumber, startDate, endDate, online) {
      this.loading1 = true;
      getStatusRankApi(
        pageNum,
        pageSize,
        meterNumber,
        startDate,
        endDate,
        online
      ).then((res) => {
        if (res.code == 200) {
          this.total1 = res.data.total;
          this.loading1 = false;
          this.tableData1 = res.data.rows;
        } else {
          this.loading1 = false;
        }
      });
    },
    //    查找
    search() {
      this.pageNum = 1;
      this.getStatus(
        this.pageNum,
        this.pageSize,
        this.meterNumber,
        this.startDate,
        this.endDate,
        this.online
      );
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 排名查询
    search1() {
      this.getStatusRank(
        this.pageNum1,
        this.pageSize1,
        this.meterNumber1,
        this.startDate1,
        this.endDate1,
        this.online1
      );
      // this.$refs.isExpand1.bodyWrapper.scrollTop = 0;
    },
    // pagesize
    handleSizeChange(val) {
      this.pageNum = 1;
      this.getStatus(
        this.pageNum,
        val,
        this.meterNumber,
        this.startDate,
        this.endDate,
        this.online
      );
      sessionStorage.setItem("pageSize", val);
      this.pageSize = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    handleSizeChange1(val) {
      this.pageNum1 = 1;
      this.pageSize1 = val;
      this.search1();
    },
    // pageNum
    handleCurrentChange(val) {
      this.getStatus(
        val,
        this.pageSize,
        this.meterNumber,
        this.startDate,
        this.endDate,
        this.online
      );
      sessionStorage.setItem("pageNum", val);
      this.pageNum = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    handleCurrentChange1(val) {
      console.log("1");
      this.pageNum1 = val;
      this.search1();
    },
  },
};
</script>

<style lang="scss" scoped>
.status {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);

  .search {
    margin-bottom: 15px;

    .elinput {
      width: 200px;
    }

    .el-button {
      margin-left: 15px;
    }
  }

  .table {
    height: 100%;

    .el-table {
      height: 80%;
    }

    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }

  /deep/ .el-dialog {
    margin-top: 0;
    height: 80%;
  }

  /deep/ .el-descriptions-item__cell {
    text-align: center;
  }
}
</style>